<template>
  <div class="goods">
    <goodslistitem
      v-for="(item, index) in goods"
      :key="index"
      :goodsitem="item"
    >
    </goodslistitem>
  </div>
</template>
<script>
import goodslistitem from "@/components/content/goods/goodslistitem";
export default {
  components: {
    goodslistitem,
  },
  props: {
    goods: [],
  },
};
</script>
<style scoped>
.goods {
  margin-top: 2px;
  display: flex;
  flex-wrap: wrap;
  /* flex-wrap: nowrap;即子元素不换行，其子元素的中宽度大于容器的宽度时，子元素的宽度会被挤压变小
  flex-wrap: wrap;即换行，其子元素的宽度不会被挤压变小
  
  这种情况需要给子元素设置宽度*/
  justify-content: space-around;
  /* 两个grid-template组件中间有空隙 */
}
</style>